<template>
	<view class="main">
		<router-view></router-view>
		<view>
			<common-nav-bar :home="true" :category="true" :cart="true" :my="true" :viewed="true">
				<view slot="content">账户设置</view>
			</common-nav-bar>
			<view class="setting">
				<view class='view' >
					<span> 管理我的账户 </span>
					<view class="user"></view>
				</view>
				<view class='view'  @click="address">
					<span> 收货地址管理 </span>
					<span class="explain"> 管理我的地址 </span>
				</view>
				<view class='view'  @click="setPwd = true">
					<span> 修改登录密码 </span>
					<span class="explain"> 定期修改登录密码,保护账户安全 </span>
				</view>
				<view class='view'  @click="setPayPwd = true">
					<span> 设置支付密码 </span>
					<span class="explain">{{ msg }}</span>
				</view>
				<view class='view'  v-if="showInputDialog" @click="$refs.inputDialog.open">
					<span> 更改昵称 </span>
				</view>
				<view class='view'  @click="logOut">
					<span> 退出登录 </span>
					<span class="explain"> 退出当前账户 </span>
				</view>
			</view>
		</view>
		<setting-login-pwd v-if="setPwd" @done="setPwd = false" />
		<setting-pay-pwd v-if="setPayPwd" @done="setPayPwd = false" @add="hasPayPwd = true" :hasPayPwd="hasPayPwd" />
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="更改昵称" placeholder="请输入新昵称" @confirm="updateNickname">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import CommonNavBar from "components/common/NavBar/CommonNavBar";
	import SettingLoginPwd from "./SettingLoginPwd";
	import SettingPayPwd from "./SettingPayPwd";
	import {
		mapMutations
	} from "vuex";
	import {
		getUserInfo,
		setUserInfo,
		clearUserInfo
	} from "common/localStorage";

	import {
		hasPayPwd,
		rename
	} from "network/user";

	export default {
		components: {
			CommonNavBar,
			SettingLoginPwd,
			SettingPayPwd,
		},
		data() {
			return {
				hasPayPwd: false,
				setPayPwd: false,
				setPwd: false,
				showInputDialog: false
			};
		},
		methods: {
			...mapMutations(["logout", "setUserInfo"]),

			address() {
				uni.navigateTo({
					url: "/pages/my/address/Address"
				})
			},
			logOut() {
				uni.showModal({
					title: "退出登录",
					content: `是否退出当前账户?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							clearUserInfo()
							this.logout();
							clearUserInfo();
							uni.switchTab({
								url: "/pages/home/Home",
							})
						} else {
							this.info('已取消');
						}
					},
				})
			},
			updateNickname(nickname) {

				if (nickname.trim().length) {
					let data = {
						nickname
					}
					rename(data).then((res) => {
						if (res[1].data.tag) {
							let userInfo = getUserInfo();
							userInfo.nickname = nickname;
							setUserInfo(userInfo);
							this.setUserInfo(userInfo);
							this.success('更改昵称成功');

						} else {
							this.error('更改昵称失败');
						}
					});
				} else {
					this.error('昵称不能为空');
				}
			},
		},
		created() {
			hasPayPwd().then((res) => {
				this.hasPayPwd = res[1].data.tag;
			});
		},
		mounted() {
			this.$nextTick(
				() => {
					this.showInputDialog = this.$refs.inputDialog ? true : false;
					console.log(this.showInputDialog, 'showInputDialog');
				})
		},
		computed: {
			msg() {
				return this.hasPayPwd ? "已设置" : "未设置";
			},
		},
	};
</script>
<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		background-color: rgb(242, 242, 242);
	}

	.setting {
		display: flex;
		flex-direction: column;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
	}

	.setting > .view {
		background-color: white;
		width: 100vw;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.setting > .view:not(:first-child) {
		display: flex;
		background-color: white;
		width: 100vw;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}

	.user {
		width: 95vw;
		height: 190rpx;
		border: 2rpx solid rgb(255, 65, 78);
		border-radius: 20rpx;
		background-color: rgb(255, 249, 249);
		margin: 30rpx 0;
	}

	.explain {
		font-size: 24rpx;
		color: gray;
	}
</style>
